<template>
  <view :data-theme="globPrimary">
    <u-navbar :title="title"></u-navbar>
    <view class="notify-wrap">
      <mescroll-body
        ref="mescrollRef"
        :bottom="attachList.length > 0 ? '210rpx' : '120rpx'"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        :up="upOption"
      >
        <view class="page-box" ref="scroll">
          <view
            class="notify-view"
            v-for="(item, index) in notifyList"
            :key="index"
            :id="item.VIEW_ID"
          >
            <view class="notify-item notify-mine" v-if="item.user_id == userInfo.id">
              <view class="desc">
                <view class="name">我</view>
                <view class="content">{{ item.content }}</view>
                <div v-if="item.attach_url.length > 0" class="preview">
                  <image
                    class="image"
                    v-for="(img, index) in item.attach_url"
                    :key="index"
                    :src="img"
                    mode="aspectFill"
                  ></image>
                </div>
              </view>
              <u-avatar :src="item.avatar_url" size="72" @click="onUser(item.user_id)"></u-avatar>
            </view>
            <view class="notify-item notify-rival" v-else>
              <u-avatar :src="item.avatar_url" size="72" @click="onUser(item.user_id)"></u-avatar>
              <view class="desc">
                <view class="name">{{ item.nick_name }}</view>
                <view class="content">{{ item.content }}</view>
                <div v-if="item.attach_url.length > 0" class="preview">
                  <image
                    class="image"
                    v-for="(img, index) in item.attach_url"
                    :key="index"
                    :src="img"
                    mode="aspectFill"
                  ></image>
                </div>
              </view>
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
    <view class="notify-bottom" :style="{ 'padding-bottom': keyboardheight + 10 + 'px' }">
      <view class="u-flex">
        <edu-upload
          ref="uUpload"
          :value.sync="attachList"
          :args="{
            width: '100rpx',
            header: '100rpx',
            count: 9,
            customBtn: true,
            showUploadList: false,
          }"
          @on-list-change="onListChange"
        >
          <view slot="addBtn">
            <u-image width="40rpx" height="40rpx" src="@/pageFound/static/images/img_icon.png">
            </u-image>
          </view>
        </edu-upload>
        <view class="center">
          <textarea
            class="textarea"
            :value="replyContent"
            placeholder-class="placeholder"
            placeholder="输入提问内容～"
            :show-confirm-bar="false"
            :adjust-position="false"
            :maxlength="200"
            :auto-height="true"
            @focus="questionFocus"
            @blur="questionBlur"
            @input="questionInput"
          />
        </view>
        <edu-button
          type="primary"
          size="medium"
          shape="circle"
          :disabled="btnDisabled"
          @click="send"
          >发送</edu-button
        >
      </view>
      <view class="pre-box">
        <view class="pre-item" v-for="(item, index) in attachImg" :key="index">
          <image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
          <view class="u-delete-icon" @tap.stop="deleteItem(index)">
            <u-icon name="close" size="12" color="#ffffff"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { mapGetters } from 'vuex'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      title: '',
      notifyList: [],
      notifyId: 0,
      sendId: 0,
      replyContent: '',
      keyboardheight: 0,
      attachImg: [],
      attachList: [],
      downOption: {
        autoShowLoading: true, // 显示下拉刷新的进度条
      },
      upOption: {
        use: false, // 禁止上拉
      },
      pageNum: 1, // 页码
      pageSize: 10, // 页长
      isEnd: false, // 是否无消息
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    btnDisabled() {
      return this.$u.trim(this.replyContent).length == 0
    },
  },
  onLoad(query) {
    this.notifyId = query.id
    this.sendId = query.sid
    this.title = query.name
  },
  methods: {
    // 页面数据
    downCallback() {
      this.$edu.api
        .getUserQuestion(this.notifyId, {
          page: this.pageNum,
          count: this.pageSize,
        })
        .then((res) => {
          const { data } = res
          if (this.pageNum == 1) this.notifyList = []

          // 需自行维护页码
          this.pageNum++

          // 先隐藏下拉刷新的状态
          this.mescroll.endSuccess()

          let list = data.data

          // 不满一页,说明已经无更多消息
          if (list.length < this.pageSize) {
            this.isEnd = true // 标记已无更多消息
            this.mescroll.lockDownScroll(true) // 锁定下拉
          }

          // 生成VIEW_ID,大写,避免污染源数据
          list.forEach((val) => {
            val.VIEW_ID = 'msg' + val.create_time // 不以数字开头
          })

          // 获取当前最顶部的VIEW_ID (注意是写在data.concat前面)
          let topMsg = this.notifyList[0]

          this.notifyList = list.concat(this.notifyList)

          this.$nextTick(() => {
            if (this.pageNum <= 2) {
              this.mescroll.scrollTo(99999, 0)
            } else if (topMsg) {
              // 保持顶部消息的位置
              let view = uni.createSelectorQuery().select('#' + topMsg.VIEW_ID)
              view
                .boundingClientRect((v) => {
                  this.mescroll.scrollTo(v.top - 200, 0) // 减去上偏移量100
                })
                .exec()
            }
          })
        })
        .catch(() => {
          this.pageNum-- // 联网失败,必须回减页码
          this.mescroll.endErr() // 隐藏下拉刷新的状态
        })
    },
    // 发送回复
    send() {
      let query = {
        question_id: this.notifyId,
        reply_user_id: this.sendId,
        content: this.$u.trim(this.replyContent),
      }
      if (this.attachList.length > 0) {
        query = {
          ...query,
          attach: String(this.attachList),
        }
      }
      this.$edu.api.createUserQuestionReply(query).then((res) => {
        this.replyContent = ''
        this.attachList = []
        this.attachImg = []
        this.$refs.uUpload.clear()
        this.pageNum = 1
        this.mescroll.triggerDownScroll()
      })
    },
    onUser(id) {
      this.$edu.route('/pageFound/user/index', {
        id: id,
      })
    },
    questionFocus(e) {
      this.keyboardheight = e.detail.height
    },
    questionBlur() {
      this.keyboardheight = 0
    },
    questionInput(e) {
      this.replyContent = e.detail.value
    },
    onListChange(lists) {
      this.attachImg = lists
    },
    deleteItem(index) {
      this.attachList.splice(index, 1)
      this.$refs.uUpload.remove(index)
    },
  },
}
</script>

<style lang="scss">
/* #ifdef MP-WEIXIN */
page {
  background: #f7f7f7;
}
/* #endif */
.notify-wrap {
  min-height: calc(100vh - 98rpx);
}
.page-box {
  /* #ifndef MP-WEIXIN */
  padding: 46rpx 30rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding: 80px 30rpx;
  /* #endif */
}
.notify-item {
  display: flex;
  margin-bottom: 40rpx;
  .name {
    font-size: 26rpx;
    font-weight: 400;
    color: $edu-content-color;
  }
  .content {
    max-width: 424rpx;
    padding: 24rpx;
    margin-top: 14rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    border-radius: 8rpx;
    word-break: break-all;
  }
  .preview {
    display: flex;
    flex-direction: column;
    .image {
      margin-top: 16rpx;
      width: 424rpx;
      height: 424rpx;
    }
  }
}
.notify-mine {
  justify-content: flex-end;
  .desc {
    margin-right: 27rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .content {
    color: $edu-main-color;
    background-color: #ffffff;
  }
}
.notify-rival {
  .desc {
    margin-left: 27rpx;
  }
  .content {
    color: #ffffff;
    background-color: #5191ff;
  }
}
.notify-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 20rpx;
  background-color: #ffffff;
  .center {
    margin-left: 24rpx;
    margin-right: 24rpx;
    flex: 1;
    padding: 0 24rpx;
    background: #f7f7f7;
    border-radius: 36rpx;
    .textarea {
      width: 100%;
      padding: 20rpx 0;
    }
  }
  ::v-deep .edu-btn {
    width: 120rpx;
    padding: 0;
  }
  .pre-box {
    display: flex;
    flex-wrap: wrap;
    .pre-item {
      flex: 0 0 70rpx;
      height: 70rpx;
      position: relative;
      margin-top: 20rpx;
      margin-right: 32rpx;
    }
    .pre-item-image {
      width: 100%;
      height: 70rpx;
      border-radius: 8rpx;
    }
    .u-delete-icon {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      z-index: 10;
      background: rgba(48, 49, 51, 0.5);
      border-radius: 100rpx;
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
